<template>
  <div class="dashboard">
    <div class="page-header">
      <div class="title-info">
        <el-avatar :size="90" :src="userInfo.avatar" />
        <div class="tietle">欢迎{{ userInfo.username }}，请开始你的工作吧！</div>
      </div>
    </div>
    <div class="page-content">
      <div class="content">
        <div class="lg-left">
          <div class="item-card">
            <div class="card-head">
              <div class="title">推荐</div>
              <div class="more" @click="init">更多</div>
            </div>
            <div class="card-body">
              <div class="card-body-item" v-for="(item, index) in state.cartoons" :key="index">
                <div class="cover">
                  <el-image lazy style="width: 100px; height: 100px" :src="item.img_url" fit="cover" />
                </div>
                <div class="cartoon-info">
                  <p><span>漫画名：</span>{{ item.name }}</p>
                  <p><span>更新时间：</span>{{ item.update_time }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="lg-right">
          <div class="item-card">
            <div class="card-head">
              <div class="title">推荐</div>
              <div class="more">更多</div>
            </div>
            <div class="card-body">
              <div class="card-body-item"  v-for="(item, index) in state.links" :key="index">
                <el-avatar :size="90" :src="item" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { reactive, getCurrentInstance, onMounted } from 'vue'
  import { cartoonDetail } from '@/network/model/cartoonModel'

  const state = reactive({
    cartoons: [],
    links: [
      'https://mp-3e2d62ab-fc55-4b79-a8d7-5adf2667014f.cdn.bspapp.com/cloudstorage/8f5ceed4-0efb-46b8-9229-df80fffc85af.jpg',
      'https://mp-3e2d62ab-fc55-4b79-a8d7-5adf2667014f.cdn.bspapp.com/cloudstorage/49325aea-ad84-4285-9c35-daafd44178cd.jpg',
      'https://mp-3e2d62ab-fc55-4b79-a8d7-5adf2667014f.cdn.bspapp.com/cloudstorage/31093619-6206-4bc9-b4c6-fd3ac3ba85e1.jpg',
      'https://mp-3e2d62ab-fc55-4b79-a8d7-5adf2667014f.cdn.bspapp.com/cloudstorage/9ef0b915-b978-4128-a9aa-0cec6bab8c2f.jpg',
      'https://mp-3e2d62ab-fc55-4b79-a8d7-5adf2667014f.cdn.bspapp.com/cloudstorage/47e10151-4188-46d6-a41d-77205fa4c579.jpg',
      'https://mp-3e2d62ab-fc55-4b79-a8d7-5adf2667014f.cdn.bspapp.com/cloudstorage/b0c70283-01d1-47fe-b395-cde775f1b7da.jpg',
      'https://mp-3e2d62ab-fc55-4b79-a8d7-5adf2667014f.cdn.bspapp.com/cloudstorage/88c2f16d-cdff-44f5-ad54-cfa5820b1df3.jpg',
      'https://mp-3e2d62ab-fc55-4b79-a8d7-5adf2667014f.cdn.bspapp.com/cloudstorage/cc869f65-5ef1-4c04-9feb-0c80d1d85d9f.jpg',
      'https://mp-3e2d62ab-fc55-4b79-a8d7-5adf2667014f.cdn.bspapp.com/cloudstorage/06db246f-7602-4454-9d0e-4f660e13f4d8.jpg'
    ]
  })
  let userInfo = reactive({
    phone: '',
    username: '',
    avatar: ''
  })
  // 获取公共接口
  // @ts-ignore
  const { proxy } = getCurrentInstance()
  const api = proxy.$api
  onMounted(() => {
    init()
  })
  async function init() {
    let { username, avatar } = JSON.parse(localStorage.getItem('USERINFO'))
    userInfo.avatar = avatar
    userInfo.username = username
    console.log(userInfo, 'userInfo')

    const res = await api.getCartoonList({ page: Math.floor(Math.random() * (20 - 1)) + 1, pageSize: 9 })
    if (res.code == 200) {
      res.data.data.forEach((item: cartoonDetail) => {
        item.create_time = item.create_time.replace('T', ' ').replace('.000Z', '')
        item.update_time = item.update_time.replace('T', ' ').replace('.000Z', '')
      })
      state.cartoons = res.data.data
    }
  }
</script>
<style src="./css/index.less" scoped lang="less"></style>
